<template>
    <div id="coursestatus" v-if='Count'>
        <!--表示是完成了课程-->
        <div class="today-course clearfix" v-if="Count.data.haveFinished == true"> 
            <div class="center">
              总运动时长： {{ getTotalTime }}
            </div>
            <div class="right">
              总消耗：{{ getTotalKcal }}千卡
            </div>
       </div>
      <!--表示未完成-->
      <div class="today-course clearfix" v-if="Count.data.haveFinished == false && !isToday">
           <div class="center">
              总运动时长： {{ 0 }}分钟
           </div>
           <div class="right">
              总消耗：{{ 0 }}千卡
           </div>
      </div>
      <!--表示待完成-->
      <div class="today-course clearfix" v-if="Count.data.haveFinished == false && isToday">
          <div class="center">
              总时长： {{ getTotalTime }}
          </div>
          <div class="right">
              预计消耗：{{ getTotalKcal }}千卡
          </div>
      </div>
    </div>
</template>
<script>
    export default {
        props: ['Count', 'getTotalTime', 'getTotalTimeFinished', 'getTotalKcal', 'getTotalkcalFinished', 'isToday']
    }
</script>
<style>
    #coursestatus {
        .today-course {
            width: 100%;
            height: 50px;
            font-size: 15px;
            /*line-height: 50px;*/
            /*padding-top: 15px;*/
            color: #fdb811;
            /*background-color: #31384b;*/
            text-align: left;
            padding-left: 20px;
            overflow: hidden;
        }
        .today-course .center {
            width: 50%;
            height: 100%;
            padding-top: 15px;
            float: left;
        }
        .today-course .right {
            width: 50%;
            height: 100%;
            padding-top: 15px;
            float: left;
        }
    }
</style>